<template>
  <el-config-provider :locale="locale">
    <div id="app">
      <el-container>
        <!-- 头部导航组件 -->
        <AppHeader />

        <!-- 主要内容区域 -->
        <el-main class="app-main">
          <router-view />
        </el-main>

        <!-- 底部信息 -->
        <el-footer class="app-footer">
          <div class="footer-content">
            <div class="disclaimer-section">
              <div class="disclaimer-title">免责声明</div>
              <div class="disclaimer-text">
                本系统仅供学习交流使用，不构成任何投资建议。所有预测结果基于历史数据分析，不保证准确性。
                股市有风险，投资需谨慎。用户应当独立判断并承担投资风险。
              </div>
            </div>
            <div class="copyright">
              <p>&copy; 2025 股票数据展示系统 - 数据来源: Akshare</p>
            </div>
          </div>
        </el-footer>
      </el-container>
    </div>
  </el-config-provider>
</template>

<script setup>
  import { ref } from 'vue';
  import { ElConfigProvider, ElContainer, ElMain, ElFooter } from 'element-plus';
  import zhCn from 'element-plus/es/locale/lang/zh-cn';
  import AppHeader from '@/components/AppHeader.vue';

  const locale = ref(zhCn);
</script>

<style scoped>
  #app {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    min-height: 100vh;
  }

  .app-main {
    background-color: #f5f7fa;
    min-height: calc(100vh - 170px);
    padding: 20px;
    margin-top: 70px; /* 为固定头部留出空间 */
  }

  /* 手机端主要内容区域适配 */
  @media (max-width: 768px) {
    .app-main {
      padding: 16px 12px;
    }
  }

  @media (max-width: 480px) {
    .app-main {
      margin-top: 108px; /* 适应更高的手机端头部 */
      padding: 12px 8px;
    }
  }

  .app-footer {
    background-color: #303133;
    color: #909399;
    height: auto !important;
    padding: 20px 0;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
  }

  .disclaimer-section {
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .disclaimer-title {
    font-size: 14px;
    font-weight: 600;
    color: #909399;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .disclaimer-title:before {
    content: "⚠️";
    font-size: 12px;
  }

  .disclaimer-text {
    font-size: 12px;
    line-height: 1.4;
    color: #909399;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
  }

  .copyright p {
    margin: 0;
    font-size: 13px;
    color: #606266;
    opacity: 0.8;
  }
</style>

<style>
  /* 全局样式 */
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
  }

  .el-container {
    min-height: 100vh;
  }
</style>
